<template>
	<view>
		<!-- 居中弹出 -->
		<gui-popup ref="guipopup" width="504" :zIndex="999">
			<view class="popup_warp">
				<view class="con gui-flex gui-column gui-justify-content-center gui-align-items-center">
					<!-- <image class="msg_img" src="@/static/image/msg_success.png" mode="aspectFit"></image> -->
					<view class="msg f32">
						释放客户至公海
					</view>
					<view class="input">
						<textarea class="textarea_warp" v-model="inputVal" placeholder="请输入释放客户至公海的相关记录"></textarea>
					</view>
					<view class="bot_warp gui-flex">
						<view class="btn left" @tap="verify">
							确定
						</view>
					</view>
				</view>
				<!-- 关闭按钮 -->
				<text class="gui-block-text demo-close gui-icons gui-absolute-rt" @tap.stop="close">&#xe78a;</text>
			</view>
		</gui-popup>
	</view>
</template>

<script>
	export default {
		name: "bai-inputModel",
		data() {
			return {
				inputVal: ''
			};
		},
		methods: {
			//01 居中弹出
			open: function() {
				this.$refs.guipopup.open();
			},
			close: function() {
				this.$refs.guipopup.close();
				this.$emit('close');
			},
			verify() {
				if (!this.inputVal) {
					this.$u.msg("请输入内容");
					return;
				}
				this.$refs.guipopup.close();
				this.$emit('verify', this.inputVal);
			},
		}
	}
</script>

<style scoped lang="scss">
	.popup_warp {
		background-color: #fff;
		width: 504rpx;
		min-height: 457rpx;
		border-radius: 20rpx;
		padding-top: 74rpx;
	}

	.msg_img {
		width: 95rpx;
		height: 101rpx;
	}

	.msg {
		color: rgba(0, 0, 0, 0.65);
		width: 320rpx;
		text-align: center;
	}

	.btn {
		width: 200rpx;
		height: 67rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
	}

	.bot_warp {
		position: absolute;
		bottom: 0;
		height: 100rpx;
		display: flex;
		align-items: center;

		.left {
			background: linear-gradient(180deg, #7EC1FF 0%, #0A60FF 100%);
		}

		.right {
			margin-left: 30rpx;
			background: linear-gradient(180deg, #FFB1A1 0%, #FB6547 100%);
		}
	}

	.demo-close {
		top: 20rpx;
		right: 20rpx;
		color: #333333;
		font-size: 40rpx;
	}

	.textarea_warp {
		width: 407rpx;
		height: 190rpx;
		background: #FFFFFF;
		box-shadow: 0px 0 30rpx 1rpx rgba(51, 51, 51, 0.1);
		border: 1rpx solid #E4E4E4;
		font-size: 24rpx;
	}
</style>